<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加新闻</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css" />
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
    <div id="app">
        <el-form  :model="addNews" >
            <div id="left">
                <div>
                    <h4>新闻标题：</h4><el-input v-model="addNews.title" style="width: 200px;height: 50px"></el-input>
                    <br>
                </div>
                <div>
                    <h4>新闻类别：</h4>
                        <el-select v-model="addNews.kind" placeholder="请选择新闻类型" style="width: 200px;height: 50px">
                            <el-option
                                    v-for="item in newsKinds"
                                    :key="item.id"
                                    :label="item.kind"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    <br>
                </div>
                <div>
                    <h4><span class="demonstration">设置上传时间：</span></h4>
                </div>
                <div>
                    <el-date-picker
                            v-model="addNews.time"
                            type="date"
                            style="width: 200px;height: 50px"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
                <br>
                <el-button type="primary" style="width: 200px;height: 50px" @click="shangchuan">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            </div>
            <div id="right">
                <div>
                    <h4><span class="demonstration">请输入新闻内容：</span></h4>
                    <br>
                </div>
                <div>
                    <el-input
                            type="textarea"
                            :rows="15"
                            style="width: 100%;height:500px"
                            placeholder="请新闻输入内容"
                            v-model="addNews.content">
                    </el-input>
                </div>
            </div>
        </el-form>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            //定义所有的新闻类型
            newsKinds:[],
            //定义添加添加的表单数据变量
            addNews:{},
        },
        created(){
            this.showAllNewsKinds();
        },
        methods:{

            shangchuan(){
                axios.post("news/add",this.addNews).then(resp=>{
                    this.$message.success("添加成功")

                })
            },

            showAllNewsKinds(){
            axios.post("newskinds/list").then(resp=>{
                this.newsKinds=resp.data.data;
            })
            },
        }
    })
</script>
<style>
    #left{
        float: left;
        width: 300px;
        height: 700px;
    }
    #right{
        float: right;
        height: 700px;
        width: 500px;
    }
</style>
</html>